<div ng-controller="Umbraco.Overlays.CompositionsOverlay as vm">

    <div class="umb-control-group">
        <div class="form-search">
            <i class="icon-search"></i>
            <input type="text"
                   style="width: 100%"
                   ng-model="searchTerm"
                   class="umb-search-field search-query input-block-level"
         localize="placeholder"
         placeholder="@placeholders_filter"
                   umb-auto-focus>
        </div>
    </div>

    <div class="umb-control-group">
    <small><localize key="contentTypeEditor_compositionsDescription"></localize></small>
    </div>

    <umb-empty-state
        ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
        position="center">
    <localize key="contentTypeEditor_noAvailableCompositions"></localize>
    </umb-empty-state>
    <umb-empty-state
        ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
        position="center">
    <localize key="contentTypeEditor_compositionInUse"></localize>
    </umb-empty-state>

    <ul class="umb-checkbox-list">
        <li class="umb-checkbox-list__item"

            ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm"
            ng-class="{'-disabled': compositeContentType.allowed===false || compositeContentType.inherited, '-selected': vm.isSelected(compositeContentType.contentType.alias)}">

            <div class="umb-checkbox-list__item-checkbox"
                 ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
                <input type="checkbox"
                       id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
                       checklist-model="model.compositeContentTypes"
                       checklist-value="compositeContentType.contentType.alias"
                       ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
                       ng-disabled="compositeContentType.allowed===false || compositeContentType.inherited"/>
            </div>

            <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed===false}">
                <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
                {{ compositeContentType.contentType.name }}
                <span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>
            </label>

        </li>
    </ul>
</div>